<script setup>
defineProps({
  title: {type: String, required: true},
  subtitle: {type: String, required: true},
})
</script>

<template>
<div class="home-panel">
  <div class="container">
<!--  主副标题  -->
    <div class="head">
<!--      <h3>
        桩基工程<small>共计492根桩</small><small>完成17根</small>
      </h3> -->
      <h3>
        {{ title }}<RouterLink to="/pile/quantity"> <small>{{subtitle}}</small></RouterLink>
      </h3>
    </div>
<!--  主体内容 复杂组件 采用系统默认插槽组件slot -->
    <slot></slot>
  </div>
</div>
</template>

<style scoped>
.home-panel {
  background: #fff;

  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
  }
  h3{
    flex: 1;
    font-size: 32px;
    font-weight: normal;
    margin-left: 6px;
    height: 35px;
    line-height: 35px;
    small{
      font-size: 20px;
      color: #999;
      margin-left: 20px;
    }
  }
}
</style>